<template>
    <div class="merchant">
        <header></header>
        <div class="serach"></div>
        <div class="nearby_shop">
            <div class="pic"></div>
            <div class="content">
                <p class="storename">沃尔玛</p>
                <p class="sale">月售</p>
                <p class="vip">VIP</p>
            </div>
        </div>
        <aside>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </aside>
        <section>
            <div class="item" v-for="item in ifmation" :key="item">

                <div class="brief">{{ item.name }}{{ item.price}}</div>
                <div class="sub">sub</div>{{count}} <div @click="addcart" class="add">add</div>
            </div>
        </section>
        <cartlist v-show="show"></cartlist>
        <footer>
            <div class="list" @click="listdetail">清单</div>
            <div class="total">总计</div>
            <router-link to="./affirm">去结算</router-link>
        </footer>

    </div>
</template>
2
<script>
import { mapMutations, mapState} from 'vuex';
export default {
    computed: {
        ...mapState("user", ["count"])
    },
    
    methods: {
        ...mapMutations("user", ["addcart"])       
    }
}
</script>

<script setup>
// import { get } from "../../utils/request.js"
import cartlist from "./components/cartlist.vue"
import { ref } from "vue"
// let ifmation = ref([])
let show = ref(false)
const listdetail = () => {
    if (show.value === false) {
        show.value = true
    } else {
        show.value = false
    }
}

// (async () => {
//     let res = await get("goodsSearch?project_id=24")
//     ifmation.value = res.result.rows
//     console.log(ifmation.value);

// })()


</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.merchant {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    header {
        width: 100%;
        height: .2rem;
        background-color: aliceblue;
    }

    .serach {
        width: 100%;
        ;
        height: .32rem;
        margin: .16rem auto;
        background-color: aliceblue;
    }

    .nearby_shop {
        margin: 0 auto;
        width: 3.39rem;
        height: 0.74rem;
        background-color: aliceblue;
        display: flex;
        margin-bottom: .16rem;

        .pic {
            width: .56rem;
            height: .56rem;
            background-color: burlywood;
            margin-right: .16rem;

        }

        .content {
            width: 2.67rem;

            .storename {
                font-size: .16rem;
            }

            .sale {
                margin: 0.08rem 0;
                font-size: .13rem;
            }

            .vip {
                font-size: .13rem;
                color: red;
            }
        }


    }

    aside {
        width: .76rem;
        height: 4.44rem;
        background-color: aliceblue;

        p {
            height: .4rem;
            background-color: burlywood;
        }
    }

    section {
        width: 2.65rem;
        height: 4.44rem;
        background-color: aliceblue;
        position: absolute;
        top: 1.74rem;
        left: .82rem;
        overflow: hidden;
        overflow-y: scroll;

        .item {
            width: 100%;
            height: .46rem;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            background-color: burlywood;
            border-bottom: 1px solid gray;
        }
    }

    footer {
        height: .49rem;
        background-color: burlywood;
        display: flex;
        flex-direction: row;
        position: relative;

        div {
            flex: 1;
        }
    }
}
</style>